<template>
  <div id="test" style="user-select: none;">
    <button @click="fangda">放大</button>
    <button @click="suoxiao">缩小</button>
    <button @click="gai" v-show="isTrue">添加</button>
    <button @click="gai" v-show="!isTrue">移动</button>

    <div class="content">
      <div
          :style="{
         transform: 'scale(' + num + ')',
         position: 'relative',
         width: '100%',
         height: '100%',
       }"
          @mousedown="moveMouse"
          @click="getOffect"
      >
        <div
            :class="
           'biaozhu' + index == 'biaozhu' + b_i
             ? 'biaozhu b_border'
             : 'biaozhu'
         "
            :ref="'biaozhu' + index"
            @mousedown.stop="move"
            @click="handelClick(index)"
            v-for="(item, index) in boxArry"
            :key="index"
            :style="{
           width: item.width + 'px',
           height: item.height + 'px',
           position: 'absolute',
           left: item.left + 'px',
           top: item.top + 'px',
           background: 'rgba(43,100,206,0.3)',
           border: 'none',
         }"
        >
          <div class="r_b" @mousedown="mouseMove11" v-if="b_i == index"></div>
          <div class="editCon" :style="{left:item.width+'px',bottom:0}"  v-if="b_i == index"></div>
        </div>
        <div
            :style="{
           height: biaozhuHeight + 'px',
           width: biaozhuWidth + 'px',
           top: biaozhuTop + 'px',
           left: biaozhuLeft + 'px',
           position: 'absolute',
           background: 'rgba(43,100,206,0.3)',
         }"
        ></div>
        <img
            style="width: 100%; height: 100%; pointer-events: none;"
            src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3479844176,2436830052&fm=26&gp=0.jpg"
            alt=""
            @mousedown="isTrue ? null : move"
        />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      num: 1,
      boxArry: [],
      isTrue: true,
      width: "",
      height: "",
      left: "",
      top: "",
      b_i: "",
      c_i: "",
      biaozhuHeight: 0,
      biaozhuWidth: 0,
      biaozhuTop: 0,
      biaozhuLeft: 0,
      positionX:0,
      positionY:0
    };
  },

  methods: {
    mouseMove11(e) {
      // console.log(e,index)
      let odiv = e.target; //获取目标元素

      //算出鼠标相对元素的位置
      let disX = e.clientX - odiv.offsetLeft;
      let disY = e.clientY - odiv.offsetTop;
      // debugger;
      e.target.onmousemove = (e) => {
        //鼠标按下并移动的事件
        //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
        // console.log('aaaaaaaaaaaaa',e)
        let left = e.clientX - disX;
        let top = e.clientY - disY;

        //绑定元素位置到positionX和positionY上面
        this.positionX = top;
        this.positionY = left;
        // console.log(this.boxArry,this.dragsIndex)
        //移动当前元素
        console.log('b_i',this.b_i)
        this.boxArry[this.b_i].width = left;
        this.boxArry[this.b_i].height = top;
        e.target.onmouseup = (e) => {
          e.target.onmousemove = null;

          // document.onmouseup = null;
        };
      };
    },
    gai() {
      this.isTrue = !this.isTrue;
    },
    getOffect(e) {
      console.log(e);
      document.onmouseup = null;
      // this.left=e.offsetX
      //     this.top=e.offsetY
    },
    moveMouse(e) {
      let odiv = e.target; //获取目标元素

      //算出鼠标相对元素的位置
      let disX = e.clientX - odiv.offsetLeft;
      let disY = e.clientY - odiv.offsetTop;
      console.log(disX, disY);
      if (this.isTrue) {
        // 拖动
        document.onmousemove = (e) => {
          //鼠标按下并移动的事件
          //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
          let left = e.clientX - disX;
          let top = e.clientY - disY;

          //绑定元素位置到positionX和positionY上面
          this.positionX = top;
          this.positionY = left;

          //移动当前元素
          odiv.style.left = left + "px";
          odiv.style.top = top + "px";
        };
        document.onmouseup = () => {
          document.onmousemove = null;
          document.onmouseup = null;
        };
      } else {
        // 添加div

        console.log(e);
        document.onmousemove = (e) => {
          //鼠标按下并移动的事件
          //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置

          let left = disX - odiv.getBoundingClientRect().x;
          let top = disY - odiv.getBoundingClientRect().y;

          console.log(e.target.offsetLeft);
          this.width = (e.clientX - disX) / this.num;
          this.height = (e.clientY - disY) / this.num;
          this.biaozhuWidth = this.width;
          this.biaozhuHeight = this.height;
          this.biaozhuLeft = left;
          this.biaozhuTop = top;
          document.onmouseup = (e) => {
            let left = disX - odiv.getBoundingClientRect().x;
            let top = disY - odiv.getBoundingClientRect().y;
            this.width = (e.clientX - disX) / this.num;
            this.height = (e.clientY - disY) / this.num;

            console.log(e.target.getBoundingClientRect(), disX, disY);
            if (this.width > 5 && this.height > 5) {
              this.boxArry.push({
                width: this.width,
                height: this.height,
                left: left,
                top: top,
              });
            }

            this.biaozhuWidth = 0;
            this.biaozhuHeight = 0;
            this.biaozhuLeft = 0;
            this.biaozhuTop = 0;
            document.onmousemove = null;
            document.onmouseup = null;
          };
        };
      }
    },
    move(e) {
      let odiv = e.target; //获取目标元素

      //算出鼠标相对元素的位置
      let disX = e.clientX - odiv.offsetLeft;
      let disY = e.clientY - odiv.offsetTop;
      document.onmousemove = (e) => {
        //鼠标按下并移动的事件
        //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
        let left = e.clientX - disX;
        let top = e.clientY - disY;

        //绑定元素位置到positionX和positionY上面
        this.positionX = top;
        this.positionY = left;

        //移动当前元素
        odiv.style.left = left + "px";
        odiv.style.top = top + "px";
      };
      document.onmouseup = () => {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    },

    fangda() {
      this.num += 0.1;
    },
    suoxiao() {
      this.num -= 0.1;
    },
    // tianjia() {
    //   this.boxArry.push({
    //     width: 100,
    //     height: 100,
    //     left: 20,
    //     top: 20,
    //   });
    // },
    handelClick(i) {
      this.b_i = i;
      console.log(i);
    },
  },
  directives: {
    drag: function (el) {
      let dragBox = el; //获取当前元素
      dragBox.onmousedown = (e) => {
        //算出鼠标相对元素的位置

        let disX = e.clientX - dragBox.offsetLeft;
        let disY = e.clientY - dragBox.offsetTop;
        console.log(disX, disY);
        document.onmousemove = (e) => {
          //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
          let left = e.clientX - disX;
          let top = e.clientY - disY;
          //移动当前元素
          dragBox.style.left = left + "px";
          dragBox.style.top = top + "px";
          console.log(left, top, "111111111");
        };
        document.onmouseup = () => {
          //鼠标弹起来的时候不再移动
          document.onmousemove = null;
          //预防鼠标弹起来后还会循环（即预防鼠标放上去的时候还会移动）
          document.onmouseup = null;
        };
      };
    },
  },
};
</script>
<style lang="scss">
#test {
  /deep/.el-dialog__body {
    padding: 10px 20px !important;
  }
  .content {
    width: 800px;
    height: 500px;
    background: #cccccc;
    margin: 0 auto;
    overflow: hidden;
    position: relative;

    .drag_box {
      width: 150px;
      height: 90px;
      border: 1px solid #666;
      background-color: #ccc;
      /* 使用定位，脱离文档流 */
      position: relative;
      top: 100px;
      left: 100px;
      /* 鼠标移入变成拖拽手势 */
      cursor: move;
      z-index: 3000;
    }
    .b_border {
      border: 1px solid red !important;
    }
    .biaozhu {
      z-index: 9999999;
    }
    .r_b {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 20px;
      height: 20px;
      background: red;
    }
    .r_b:hover {
      cursor: se-resize;
    }
    .editCon {
      position: absolute;
      //left: 0;
      //bottom: 0;
      width: 200px;
      height: 200px;
      background: #4dce71;
    }
  }
}
</style>>
